<template>
  <div :class="$style.container">
    <section>
      <el-input 
        v-model="value" 
        :class="$style.input" 
        @blur="blur" 
        @focus="focus" 
        @keyup.enter="handleSerchClick"/>
      <el-button @click.stop="handleSerchClick">搜索</el-button>
      <div 
        ref="searchResult" 
        :class="$style.showModal">
        <dl 
          v-if="!value" 
          @mouseover="mouseover" 
          @mouseleave="mouseleave">
          <dt>热门电影</dt>
          <dd 
            v-for="item in hots.slice(0,5)" 
            :key="item.id">
            <nuxt-link :to="{path: '/detail',query: {id:item.id}}">{{ item.name }}</nuxt-link>
          </dd>
        </dl>
      </div>
      <dl :class="$style.hot">
        <dd>
          <span 
            v-for="item in hots.slice(0,3)" 
            :key="item.name">
            <nuxt-link :to="{path: '/list',query: {id:item.id}}">{{ item.name }}</nuxt-link>
          </span>
        </dd>
      </dl>
      
    </section>
    
  </div>
</template>
<script>
import http from '../../APIService/http'
export default {
  props: {
    hots: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      value: '',
      searchResult: [],
      lock: false
    }
  },
  methods: {
    focus() {
      this.$refs.searchResult.style.display = 'block'
    },
    blur() {
      if (!this.lock) {
        this.$refs.searchResult.style.display = 'none'
      }
    },
    mouseover() {
      this.lock = true
    },
    mouseleave() {
      this.lock = false
    },
    // 搜索电影
    async handleSerchClick() {
      window.location.href = `/list?keyWord=${this.value}`
    }
  }
}
</script> 
<style lang="scss" module>
.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  z-index: 100;
  section {
    .input {
      float: left;
      width: 800px;
    }
    input {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      height: 50px;
      line-height: 50px;
      &:hover,
      &:focus {
        border-color: #dcdfe6;
      }
    }
    button {
      border: 1px solid #e36049;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-left: none;
      background: #e36049;
      color: #fff;
      height: 50px;
      &:hover,
      &:focus {
        color: #fff;
        border-color: #e36049;
        background-color: #e36049;
      }
    }
  }
  .hot {
    margin: 5px;
    span {
      color: #999;
      margin-right: 10px;
      margin-bottom: 3px;
      display: inline-block;
      cursor: pointer;
      &:hover {
        color: #e36049;
      }
    }
  }
  .showModal {
    display: none;
    dl {
      margin-top: 0px;
      width: 800px;
      box-sizing: border-box;
      position: absolute;
      border: 1px solid #e5e5e5;
      border-top: none;
      background: #fff;
      z-index: 999;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      color: #999;
      font-size: 12px;
      text-align: left;
      padding: 10px;
      dt {
        padding-bottom: 5px;
        font-weight: 700;
        font-size: 12px;
      }
      dd {
        margin-right: 10px;
        display: inline-block;
        padding-top: 5px;
        color: #666;
        font-size: 12px;
        cursor: pointer;
        &:hover {
          color: #e36049;
        }
      }
      .item {
        margin: -10px;
        display: block;
        font-size: 12px;
        padding: 7px 15px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #e36049;
          background: #f8f8f8;
        }
      }
    }
  }
}
</style>
